<template>
  <el-row class="marginBot" :gutter="15">
    <el-col v-for="(item,index) in dashboardList" :key="index" :span="6">
      <div class="dashboard-card">
        <header :style="{'background-color':item.headerBg}">
          {{ item.title }}
          <div />
        </header>
        <section :style="{background: item.mainBg, color: item.mainTextColor}">
          {{ item.mainValue }} <span>万元</span>
        </section>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getIndicators } from '@/api/basic-setting/dashboard/dashboard'

export default {
  name: 'Indicator',
  data() {
    return {
      dashboardList: [
        {
          title: '资产原值',
          headerBg: '#4FA2EB',
          mainBg: '#F7FBFE',
          mainTextColor: '#4FA2EB',
          mainValue: ''
        },
        {
          title: '累计折旧',
          headerBg: '#EBA548',
          mainBg: '#FFFBF6',
          mainTextColor: '#EBA548',
          mainValue: ''
        },
        {
          title: '资产净值',
          headerBg: '#00ADAA',
          mainBg: '#F5FCFC',
          mainTextColor: '#00ADAA',
          mainValue: ''
        },
        {
          title: '本期折旧',
          headerBg: '#EE795A',
          mainBg: '#FFF8F8',
          mainTextColor: '#EE795A',
          mainValue: ''
        }
      ]
    }
  },
  created() {
    this.getIndicatorsList()
  },
  methods: {
    async getIndicatorsList() {
      const res = await getIndicators()
      if (res.code === 20000) {
        this.dashboardList[0].mainValue = res.data[0].originalvalue || 0
        this.dashboardList[1].mainValue = res.data[0].accumulateddeprecia || 0
        this.dashboardList[2].mainValue = res.data[0].equity || 0
        this.dashboardList[3].mainValue = res.data[0].currentdepreciation || 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-card {
    width: 100%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    header {
      /*background-image: url("../../../../../assets/dashboard/card_zuo.png"),*/
      /*                  url("../../../../../assets/dashboard/card_you.png");*/
      background-repeat: no-repeat;
      background-position: 3% center, 97% center;
      height: 36px;
      line-height: 36px;
      color:#fff;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
    }
    section {
      height: 74px;
      padding: 15px 0 0;
      text-align: center;
      font-weight: bold;
      font-size: 26px;
      span {
        font-size: 16px;
      }
    }
  }
</style>
